import { useContext, useCallback } from "react";

// import PixelarticonsComment from "~icons/pixelarticons/comment";
// import PixelarticonsForward from "~icons/pixelarticons/forward";
// import IconHeartFilled from "~icons/custom/heart-filled";
// import PixelarticonsHeart from "~icons/pixelarticons/heart";

import { LIKE_COLOR } from "~/constants";
import { ManagerContext, PageContext } from "~/contexts";
import IconButton from "~/components/IconButton";
import HeartIcon from "~/components/icons/HeartIcon";
import CommentIcon from "~/components/icons/CommentIcon";
import ShareIcon from "~/components/icons/ShareIcon";

const containerStyle = {
  display: "flex",
  flexDirection: "row" as "row",
  flexWrap: "nowrap" as "nowrap",
  gap: "0.5em",
  justifyContent: "space-between",
};

interface Props {
  post: Post;
  onShare: () => void;
  [key: string]: any;
}

export default function PostActionsBar({ post, onShare, ...props }: Props) {
  const manager = useContext(ManagerContext);
  const { setPage, pageData } = useContext(PageContext);

  const onLike = useCallback(async () => {
    if (post.liked) {
      manager.unlike(post.id);
    } else {
      manager.like(post.id);
    }
  }, [post.id, post.liked]);

  const onComment = useCallback(() => {
    // 检查当前是否在评论页面
    if (pageData.key === "comments") {
      // 如果在评论页面，返回主页
      setPage({ key: "home" });
    } else {
      // 如果在其他页面，导航到评论页面
      sessionStorage.feedScrollPos = window.pageYOffset;
      setPage({ key: "comments", postId: post.id });
    }
  }, [post.id, pageData]);

  const likeIconStyle = {
    color: post.liked ? LIKE_COLOR : undefined,
  };

  return (
    <div style={containerStyle} {...props}>
      <IconButton style={likeIconStyle} onClick={onLike}>
        {post.liked ? <HeartIcon filled={true} /> : <HeartIcon />}
        {post.likes}
      </IconButton>
      <IconButton onClick={onComment}>
        <CommentIcon />
        {post.replies}
      </IconButton>
      <IconButton onClick={onShare}>
        <ShareIcon
          style={{ width: "1.2em", height: "auto" }}
        />
      </IconButton>
    </div>
  );
}